<template>
  <div class="enroll_container">
    <div class="header">
      <el-button type="info" style="background-color: #6e767c" @click="router.push('/nav')">回主页</el-button>
    </div>
    <div class="btns_type">
      <el-button :class="activeBtnKey === 0? 'activeBtn' : 'defaultBtn'" @click="activeBtnKey = 0" size="large">登记龙钞冠字号</el-button>
      <el-button :class="activeBtnKey === 1? 'activeBtn' : 'defaultBtn'" @click="activeBtnKey = 1" size="large">登记蛇钞冠字号</el-button>
    </div>
    <div class="typeList">
      <el-button
          v-for="button in typeList"
          :key="button.value"
          :class="activeType == button.value? 'activeBtn' : ''"
          @click="()=>onChangeType(button.value)"
      >
        {{ button.label }}
      </el-button>
    </div>
    <div class="form-content">
      <div v-show="activeType === 0">
        <div>
          <div class="label" style="display: flex; margin-bottom: 4px">冠字号J</div>
          <el-input :class="codeNumberErr? 'codeNumberErr' : ''" v-model="codeNumber" @input="onCodeNumberChange" placeholder="请输入9位数字"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin: 16px 0">
          <span class="label">裸币/评级：</span>
          <el-button style="background-color: #efefef" @click="coinsModalVisible = true">
            {{formatType(coinsType)}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
          <el-button v-if="coinsType!== 0" style="background-color: #efefef" @click="levelModalVisible = true">
            {{levelType}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
        </div>
        <el-button type="primary" @click="onEnroll" style="width: 100%; height: 48px!important; background-color: #1677ff">
          <span style="font-size: 18px!important;">登记</span>
        </el-button>
      </div>
      <div v-show="activeType === 1">
        <div>
          <div class="label" style="display: flex; margin-bottom: 4px">开始号码J</div>
          <el-input :class="codeNumberErr? 'codeNumberErr' : ''" v-model="codeNumber" @input="onCodeNumberChange" placeholder="请输入9位数字"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin: 16px 0">
          <span class="label">裸币/评级：</span>
          <el-button style="background-color: #efefef" @click="coinsModalVisible = true">
            {{formatType(coinsType)}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
          <el-button v-if="coinsType!== 0" style="background-color: #efefef" @click="levelModalVisible = true">
            {{levelType}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
        </div>
        <el-button type="primary" @click="onEnrollTen" style="width: 100%; height: 48px!important; background-color: #1677ff">
          <span style="font-size: 18px!important;">登记</span>
        </el-button>
      </div>
      <div v-show="activeType === 2">
        <div>
          <div class="label" style="display: flex; margin-bottom: 4px">开始号码J</div>
          <el-input :class="codeNumberErr? 'codeNumberErr' : ''" v-model="codeNumber" @input="onCodeNumberChange" placeholder="请输入9位数字"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin: 16px 0">
          <span class="label">裸币/评级：</span>
          <el-button style="background-color: #efefef" @click="coinsModalVisible = true">
            {{formatType(coinsType)}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
          <el-button v-if="coinsType!== 0" style="background-color: #efefef" @click="levelModalVisible = true">
            {{levelType}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
        </div>
        <el-button type="primary" @click="onEnrollHundred" style="width: 100%; height: 48px!important; background-color: #1677ff">
          <span style="font-size: 18px!important;">登记</span>
        </el-button>
      </div>
      <div v-show="activeType === 3">
        <div>
          <div class="label" style="display: flex; margin-bottom: 4px">开始号码J</div>
          <el-input :class="codeNumberErr? 'codeNumberErr' : ''" v-model="codeNumber" @input="onCodeNumberChange" placeholder="请输入9位数字"></el-input>
        </div>
        <div style="margin: 16px 0">
          <div class="label" style="display: flex; margin-bottom: 4px">结束号码J</div>
          <el-input :class="endCodeNumberErr? 'codeNumberErr' : ''" v-model="endNumber" @input="onEndCodeNumberChange" placeholder="请输入9位数字"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin: 16px 0">
          <span class="label">裸币/评级：</span>
          <el-button style="background-color: #efefef" @click="coinsModalVisible = true">
            {{formatType(coinsType)}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
          <el-button v-if="coinsType!== 0" style="background-color: #efefef" @click="levelModalVisible = true">
            {{levelType}}<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
          </el-button>
        </div>
<!--        <el-button @click="onSetContinuousRate" type="primary" style="width: 120px; background-color: #6f704d; height: 48px!important; display: flex; margin: 16px 0; border: none!important;">-->
<!--          <span style="font-size: 18px!important;">设置评级</span>-->
<!--        </el-button>-->
<!--        <el-card v-for="item in numberInfoList" :key="item.serialNumber" style="margin-bottom: 12px">-->
<!--          <div style="font-size: 18px; display: flex">冠字号：{{item.serialNumber}}</div>-->
<!--          <span class="label" style="display: flex; margin: 8px 0">裸币/评级：</span>-->
<!--          <el-button :class="activeIpt === `${item.serialNumber}_0`? 'tenButton focus_ipt' : 'tenButton'" style="background-color: #efefef; display: flex; width: 100%" @click="()=>{onClickItem(item); activeIpt=`${item.serialNumber}_0`; coinsTenModalVisible = true}">-->
<!--            {{formatType(item.nakedOrGraded)}}<el-icon style="margin-left: 5px;"><CaretBottom /></el-icon>-->
<!--          </el-button>-->
<!--          <el-button :class="activeIpt === `${item.serialNumber}_1`? 'tenButton focus_ipt' : 'tenButton'" v-if="item.nakedOrGraded!== 0" @click="()=>{onClickItem(item); activeIpt=`${item.serialNumber}_1`;  gradedTenModalVisible = true}" style="background-color: #efefef; display: flex; margin: 8px 0; width: 100%">-->
<!--            {{item.gradedScore}}<el-icon style="margin-left: 5px"><CaretBottom /></el-icon>-->
<!--          </el-button>-->
<!--        </el-card>-->
        <el-button type="primary" @click="onSetContinuousRate" style="width: 100%; height: 48px!important; background-color: #1677ff">
          <span style="font-size: 18px!important;">登记</span>
        </el-button>
      </div>
    </div>
    <van-popup v-model:show="coinsTenModalVisible" round style="width: calc(100% - 48px)">
      <van-radio-group v-model="coinsTenItem.nakedOrGraded">
        <van-cell-group inset style="margin: 0">
          <van-cell v-for="item in coinsTypes" :key="item.value" :title="item.label" clickable @click="coinsTenItem.nakedOrGraded=item.value; coinsTenModalVisible=false">
            <template #right-icon>
              <van-radio :name="item.value" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <van-popup v-model:show="gradedTenModalVisible" round style="width: calc(100% - 48px)">
      <van-radio-group v-model="coinsTenItem.gradedScore">
        <van-cell-group inset style="margin: 0">
          <van-cell v-for="item in levelTypes" :key="item" :title="item" clickable @click="coinsTenItem.gradedScore=item; gradedTenModalVisible=false">
            <template #right-icon>
              <van-radio :name="item" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <van-popup v-model:show="confirmListModalVisible" round style="width: calc(100% - 12px); padding: 0 12px">
      <h3 style="display: flex">确认登记信息</h3>
      <div class="confirm_box" v-for="item in numberInfoList" :key="item.serialNumber" style="display: flex; align-items: center">
        <div class="label">{{item.billType === 0? '龙' : '蛇'}}钞：</div>
        <div class="value">{{item.serialNumber}}</div>
        <div class="label">评级：</div>
        <div class="value">{{formatType(item.nakedOrGraded)}}</div>
        <div v-if="item.nakedOrGraded!== 0" style="display: flex; align-items: center">
          <div class="label">分数：</div>
          <div class="value">{{item.gradedScore}}</div>
        </div>
      </div>
      <el-button type="primary" @click="onConfirmInsertList" style="width: 100%; height: 48px!important; background-color: #1677ff; margin-top: 24px">
        <span style="font-size: 18px!important;">确认</span>
      </el-button>
      <el-button type="primary" @click="confirmListModalVisible=false" style="width: 100%; height: 48px!important; background-color: #1677ff; margin: 12px 0 24px">
        <span style="font-size: 18px!important;">取消</span>
      </el-button>
    </van-popup>
    <van-popup v-model:show="coinsModalVisible" round style="width: calc(100% - 48px)">
      <van-radio-group v-model="coinsType">
        <van-cell-group inset style="margin: 0">
          <van-cell v-for="item in coinsTypes" :key="item.value" :title="item.label" clickable @click="coinsType = item.value; coinsModalVisible=false">
            <template #right-icon>
              <van-radio :name="item.value" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <van-popup v-model:show="levelModalVisible" round style="width: calc(100% - 48px)">
      <van-radio-group v-model="levelType">
        <van-cell-group inset style="margin: 0">
          <van-cell v-for="item in levelTypes" :key="item" :title="item" clickable @click="levelType = item; levelModalVisible=false">
            <template #right-icon>
              <van-radio :name="item" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <van-popup v-model:show="confirmModalVisible" round style="width: calc(100% - 12px); padding: 0 12px">
      <h3 style="display: flex">确认登记信息</h3>
      <div class="confirm_box">
        <div>
          <div class="label">{{activeBtnKey === 0? '龙' : '蛇'}}钞：</div>
          <div class="value">J{{codeNumber}}</div>
        </div>
        <div>
          <div class="label">评级：</div>
          <div class="value">{{formatType(coinsType)}}</div>
        </div>
        <div v-if="coinsType!== 0">
          <div class="label">分数：</div>
          <div class="value">{{levelType}}</div>
        </div>
      </div>
      <el-button type="primary" @click="onConfirm" style="width: 100%; height: 48px!important; background-color: #1677ff; margin-top: 24px">
        <span style="font-size: 18px!important;">确认</span>
      </el-button>
      <el-button type="primary" @click="confirmModalVisible=false" style="width: 100%; height: 48px!important; background-color: #1677ff; margin: 12px 0 24px">
        <span style="font-size: 18px!important;">取消</span>
      </el-button>
    </van-popup>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import { ArrowDown } from '@element-plus/icons-vue'
import router from "@/router";
import {ElMessage} from "element-plus";
import {
  getContinuousCodes,
  getHundredCodes,
  getTenCodes,
  insertContinuousCodes,
  insertOne,
  insertTen,
  insertTens
} from "@/api/api";

const activeBtnKey = ref(0)
const codeNumber = ref('') //开始号码
const endNumber = ref('') //结束号码
const activeType = ref(0) //页签选中：单张/标十/标百/连续号
const coinsTypes = ref([
  {label: '裸币', value: 0},
  {label: 'ACG', value: 1},
  {label: 'PMG', value: 2},
  {label: 'PCGS', value: 3},
])
const levelTypes = ref(['65', '66', '67', '68', '69', '70']) // 初始分数数组
const coinsType = ref(0) //裸币/ACG/PMG/PCGS
const levelType = ref(65) //分数
const numberInfoList = ref([]) //存多条的列表信息
const coinsTenItem = ref()
const coinsTenModalVisible = ref(false)
const gradedTenModalVisible = ref(false)
const coinsModalVisible = ref(false)
const levelModalVisible = ref(false)
const confirmModalVisible = ref(false)
const confirmListModalVisible = ref(false)
const codeNumberErr = ref(false) //号码错误
const endCodeNumberErr = ref(false) //结束号码错误

const typeList = ref([{label: '单张', value: 0}, {label: '标十', value: 1},  {label: '标百', value: 2}, {label: '连续号', value: 3}]);

const formatType = (coinsType) =>{
  switch (coinsType) {
    case 0:
      return '裸币'
    case 1:
      return 'ACG'
    case 2:
      return 'PMG'
    case 3:
      return 'PCGS'
  }
}

const onChangeType = (value) => {
  activeType.value = value
  codeNumberErr.value = false
  codeNumber.value = ''
  coinsType.value = 0
  levelType.value = 65
  numberInfoList.value = []
}

const onConfirm = () => {
  confirmModalVisible.value = false
  let data = {
    //类型 0-龙钞 1-蛇钞
    billType: activeBtnKey.value,
    //J冠字号
    serialNumber: `J${codeNumber.value}`,
    //0-单张 1-标十 2-标百 3-连续号
    numberType: activeType.value,
    //0-裸 1-ACG 2-PMG 3-PCGS
    nakedOrGraded:coinsType.value,
    //65 66 70 67 68 69 70
    gradedScore: coinsTypes.value !== 0 ? levelType.value : 0
  }
  if (data.nakedOrGraded === 0) delete data.gradedScore
  insertOne(data).then(res =>{
    if (res.code === 200) {
      ElMessage.success({
        message: '登记成功！',
        type: 'success',
      });
      coinsType.value = 0
      codeNumber.value = ''
    } else {
      ElMessage.error({
        message: res.msg,
        type: 'error',
      });
    }
  })
}

//标十、标百 确认登记
const onConfirmInsertList = async () => {
  numberInfoList.value.forEach(item => {
    item.billType = activeBtnKey.value
    if (item.nakedOrGraded === 0) delete item.gradedScore
  })
  if (activeType.value === 1) { //标十
    const res = await insertTen(numberInfoList.value)
    if (res.code!== 200) {
      ElMessage.error({
        message: res.msg,
        type: 'error',
      });
    } else {
      confirmListModalVisible.value = false
      codeNumber.value = ''
      numberInfoList.value = []
      coinsType.value = 0
      codeNumber.value = ''
      ElMessage.success({
        message: '登记成功！',
        type: 'success',
      });
    }
  } else if (activeType.value === 2) { //标百
    const res = await insertTens(numberInfoList.value)
    if (res.code!== 200) {
      ElMessage.error({
        message: res.msg,
        type: 'error',
      });
    } else {
      confirmListModalVisible.value = false
      codeNumber.value = ''
      numberInfoList.value = []
      coinsType.value = 0
      codeNumber.value = ''
      ElMessage.success({
        message: '登记成功！',
        type: 'success',
      });
    }
  } else if (activeType.value === 3) {
    numberInfoList.value.forEach(item => {
      item.numberType = 3
    })
    const res = await insertContinuousCodes(numberInfoList.value)
    if (res.code!== 200) {
      ElMessage.error({
        message: res.msg,
        type: 'error',
      });
    } else {
      confirmListModalVisible.value = false
      codeNumber.value = ''
      endNumber.value = ''
      numberInfoList.value = []
      ElMessage.success({
        message: '登记成功！',
        type: 'success',
      });
    }
  }
}

const onCodeNumberChange = (value) => {
  if (value.length === 9) codeNumberErr.value = false
}

const onEndCodeNumberChange = (value) => {
  if (value.length === 9) endCodeNumberErr.value = false
}

const onEnroll = () => {
  if (codeNumber.value.length!== 9) {
    codeNumberErr.value = true
    return ElMessage.error({
      message: '请输入有效的9位数！',
      type: 'error',
    });
  }
  confirmModalVisible.value = true
}

const onSetContinuousRate = async () => {
  if (codeNumber.value.length!== 9) {
    codeNumberErr.value = true
    return ElMessage.error({
      message: '请输入有效的9位数！',
      type: 'error',
    });
  } else if (endNumber.value.length!== 9) {
    endCodeNumberErr.value = true
    return ElMessage.error({
      message: '请输入有效的9位数！',
      type: 'error',
    });
  } else if (parseInt(endNumber.value) < parseInt(codeNumber.value)) {
    return ElMessage.error({
      message: '结束号码需要大于开始号码！',
      type: 'error',
    });
  }

  const res = await getContinuousCodes(`J${codeNumber.value}`, `J${endNumber.value}`)
  if (res.code!== 200) {
    return ElMessage.error({
      message: res.msg,
      type: 'error',
    });
  }
  numberInfoList.value = (res?.rows?? []).map(item => {
    return {
      billType: activeBtnKey.value,
      //冠字号J
      serialNumber: item,
      //0-单张 1-标十 2-标百 3-连续号
      numberType: 3,
      // 0-裸 1-ACG 2-PMG 3-PCGS
      nakedOrGraded: coinsType.value,
      gradedScore: levelType.value,
    }
  })
  confirmListModalVisible.value = true
}

const onEnrollTen = async () => {
  if (codeNumber.value.length!== 9) {
    codeNumberErr.value = true
    return ElMessage.error({
      message: '请输入有效的9位数！',
      type: 'error',
    });
  }

  const res = await getTenCodes(`J${codeNumber.value}`)
  if (res.code!== 200) {
    return ElMessage.error({
      message: res.msg,
      type: 'error',
    });
  }
  numberInfoList.value = (res?.rows?? []).map(item => {
    return {
      //冠字号J
      serialNumber: item,
      //0-单张 1-标十 2-标百 3-连续号
      numberType: 1,
      //0-裸 1-ACG 2-PMG 3-PCGS
      nakedOrGraded: coinsType.value,
      gradedScore: levelType.value,
      billType: activeBtnKey.value
    }
  })
  confirmListModalVisible.value = true
}

const onEnrollHundred = async () => {
  if (codeNumber.value.length!== 9) {
    codeNumberErr.value = true
    return ElMessage.error({
      message: '请输入有效的9位数！',
      type: 'error',
    });
  }
  const res = await getHundredCodes(`J${codeNumber.value}`)
  if (res.code!== 200) {
    ElMessage.error({
      message: res.msg,
      type: 'error',
    });
  } else {
    numberInfoList.value = (res?.rows?? []).map(item => {
      if (coinsType.value!== 0) {
        return {
          serialNumber: item,
          //0-单张 1-标十 2-标百 3-连续号
          numberType: 2,
          //0-裸 1-ACG 2-PMG 3-PCGS
          nakedOrGraded: coinsType.value,
          gradedScore: levelType.value
        }
      } else {
        return {
          serialNumber: item,
          numberType: 2,
          nakedOrGraded: coinsType.value,
        }
      }
    })
    confirmListModalVisible.value=true
  }
}

// 监听 activeType 的变化
watch(activeType, (newValue) => {
  if (newValue > 0) {
    if (!levelTypes.value.includes('67+')) {
      levelTypes.value.splice(3,0,'67+')
    }
  } else {
    levelTypes.value = levelTypes.value.filter(item => item!== '67+')
  }
})
</script>

<style lang="less">
.enroll_container {
  height: 100%;
  background-color: #fff;

  .header {
    display: flex;
    padding: 12px;
    box-shadow: 0 10px 15px -5px rgba(0,0,0,0.12);
  }

  .btns_type {
    padding: 12px;

    .activeBtn {
      background-color: #1677ff;
      color: #fff;
    }

    .defaultBtn {
      border: none;
    }

    .el-button {
      height: 44px!important;
    }

    .el-button > span {
      font-size: 17px!important;
    }
  }

  .typeList {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 12px;
    margin-top: 10px;

    .activeBtn {
      background-color: #1677ff;
      color: #fff;
    }

    .el-button {
      height: 44px!important;
      width: 25%;
    }
  }

  .form-content {
    padding: 12px;
    margin-top: 8px;

    .label {
      font-weight: bold!important;
      font-size: 17px;
      color: #000;
    }

    .codeNumberErr {
      .el-input__wrapper {
        border: 1px solid red!important;
      }

      .el-input__wrapper.is-focus {
        box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.18) inset!important;
      }
    }

    .tenButton {
      & > span {
        width: 100%;
        display: flex;
        justify-content: space-between;

        svg {
          height: 0.7em!important;
          width: 0.7em!important;
        }
      }
    }

    .focus_ipt {
      border: 1px solid #409eff!important;

      svg {
        color: #409eff!important;
      }
    }
  }

  .confirm_box {
    display: flex;
    align-items: center;

    .value {
      color: #000;
      font-weight: bold;
      margin-right: 5px;
    }

    & > div {
      display: flex;
      align-items: center;
    }
  }
}
</style>
